<template>
    <view class="forward-box">
        <view class="info-box">
            <view class="info-center">
                <view class="info-title">
                    <image class="logo-img" mode="center" src="https://cdn1.visiotrip.com/h5AndMini/2023-3-29/app-log.png" />
                    <view class="logo-title">欢萌旅行</view>
                </view>
                <view class="introduce">{{ shareData.title }}</view>
                <image class="info-img" :src="shareData.coverUrl" mode="aspectFill"/>
                <view class="info-bottom">
                    <image class="qrCode" :src="shareData.qrCode" />
                    <view class="qrTxt">
                        <view class="txt-1">长按识别二维码, 体验行程</view>
                        <view class="txt-2">成为亿万中国人走向世界的桥梁</view>
                    </view>

                </view>

            </view>
        </view>
        <view class="options-box">
            <view class="option" :data-spmCntSuffix="'GPTravelWechat2C.Share.Pop-up@1.wechart@'" :data-custom="1" :data-spm="shareData">
                <image class="option-icon" src="https://cdn1.visiotrip.com/h5AndMini/2023-3-29/share_pyq.png" />
                <view>保存到相册</view>
            </view>
            <view class="option" :data-spmCntSuffix="'GPTravelWechat2C.Share.Pop-up@1.moments@'" :data-custom="2" :data-spm="shareData">
                <image class="option-icon pyq" src="https://cdn1.visiotrip.com/h5AndMini/2023-3-29/saved-photos-album.png" />
                <view>发布至朋友圈</view>
            </view>
        </view>
    </view>
</template>

<script>

export default {
    props: {
        shareData: {
            type: Object
        }
    },
    components: {},
    computed: {},
    data() {
        return {};
    },
    onLoad() { },
    methods: {

    }
};
</script>

<style lang="scss" scoped>
.forward-box {
    width: 650rpx;
    min-height: 650rpx;
}

.info-box {
    width: 650rpx;
    min-height: 653rpx;
    background: #FFFFFF;
    border-radius: 30rpx;

    .info-center {
        width: 570rpx;
        margin: 0 auto;

        .info-img {
            width: 570rpx;
            height: 500rpx;
        }

        .info-title {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 154rpx;
            padding: 40rpx 0 30rpx 0;

            .logo-img {
                width: 84rpx;
                height: 84rpx;
                border-radius: 10rpx;
            }

            .logo-title {
                font-size: 36rpx;
                font-weight: 600;
                color: $sl-color-grey;
                padding-left: 20rpx;
            }
        }

        .introduce {
            font-size: 32rpx;
            font-weight: 500;
            color: $sl-color-grey;
            padding-bottom: 20rpx;
        }

        .info-bottom {
            height: 190rpx;
            display: flex;
            align-items: center;
            padding: 30rpx 0 40rpx 0;

            .qrCode {
                width: 119rpx;
                height: 119rpx;
            }

            .qrTxt {
                padding-left: 20rpx;

                .txt-1 {
                    font-size: 28rpx;
                    font-weight: 400;
                    color: $sl-color-grey;
                }

                .txt-2 {
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #999999;
                }
            }
        }
    }
}

.options-box {
    width: 650rpx;
    height: 76rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 50rpx;

    .option {
        width: 290rpx;
        height: 76rpx;
        background: #FFFFFF;
        border-radius: 46rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        font-weight: 400;
        color: $sl-color-grey;
        line-height: 36rpx;
        .option-icon{
            width: 45rpx;
            height: 45rpx;
            padding-right: 2rpx;
        }
        .pyq{
            width: 36rpx;
            height: 36rpx;
            margin-right: 6rpx;
        }
    }
}</style>
